<template>
  <div class="container">
    <div style="display: flex;justify-content: end;">
      <h3>{{ timeMark }}</h3>
    </div>
    <a-row :gutter="6" justify="space-between" align="middle" type="flex">
      <a-col :span="7" v-for="(item, index) in data" :key="index">
        <div class="box-cord">
          <histogram
            :id="item.id"
            :title-name="item.titleName"
            :quantity="item.quantity"
            :leftName="item.leftName"
            :leftValue="item.leftValue"
            :percentage="item.percentage"
            :item="item"
            @clickQuantity="clickQuantity"
          ></histogram>
        </div>
      </a-col>
    </a-row>
    <a-row :gutter="6" justify="space-between" align="middle" type="flex">
      <a-col :span="7" v-for="(item, index) in list" :key="index" style="margin-top: 10px;">
        <div class="box-cord">
          <histogram
            :id="item.id"
            :title-name="item.titleName"
            :quantity="item.quantity"
            :leftName="item.leftName"
            :leftValue="item.leftValue"
            :percentage="item.percentage"
            :item="item"
            @clickQuantity="clickQuantity"
          ></histogram>
        </div>
      </a-col>
    </a-row>
    <err-details ref="details"></err-details>
    <wfu-alarm ref="alarm"></wfu-alarm>
  </div>
</template>

<script>
import histogram from '@/components/graph/Histogram'
import errDetails from '../errReport/details'
import wfuAlarm from '../errReport/alarmDetails'
import {
  wfuSignHdOutYesCount,
  wfuSignHdOutNoCount,
  wfuSignWyInYesCount,
  wfuSignWyOutYesCount,
  wfuSignHdInYesCount
} from '@api/wfuSign/wfuSign'
import { morningAlarmCount, afternoonAlarmCount, eveningAlarmCount } from '@api/wfuAlarm/wfuAlarm'

const moment = require('moment')

export default {
  name: 'index',
  components: { histogram, errDetails, wfuAlarm },
  data () {
    return {
      timeMark: '',
      data: [
        {
          id: 'hdSignIn',
          titleName: '弘德已签到',
          quantity: 0,
          leftName: '总人数',
          leftValue: 0,
          percentage: 60
        },
        {
          id: 'hdNotGo',
          titleName: '弘德未出发',
          quantity: 0,
          leftName: '总人数',
          leftValue: 0,
          percentage: 60
        },
        {
          id: 'SignLocal',
          titleName: '已到达主校区',
          quantity: 0,
          leftName: '弘德签到人数',
          leftValue: 0,
          percentage: 60
        }
      ],
      list: [
        {
          id: 'disPlaceLocal',
          titleName: '已出主校区',
          quantity: 0,
          leftName: '弘德签到人数',
          leftValue: 0,
          percentage: 60
        },
        {
          id: 'localToHd',
          titleName: '已到达弘德',
          quantity: 0,
          leftName: '弘德签到人数',
          leftValue: 0,
          percentage: 60
        },
        {
          id: 'err',
          titleName: '异常追踪',
          quantity: 0,
          leftName: '弘德签到人数',
          leftValue: 0,
          percentage: 60
        }
      ],
      dateMark: undefined
    }
  },
  created () {
    if (this.timeRange('00:00', '13:00')) {
      this.dateMark = 'morning_scope'
      this.timeMark = '上午'
      morningAlarmCount().then(res => {
        this.list[2].quantity = res.data || '0'
      })
    } else if (this.timeRange('13:01', '18:20')) {
      this.dateMark = 'afternoon_scope'
      this.timeMark = '下午'
      afternoonAlarmCount().then(res => {
        this.list[2].quantity = res.data || '0'
      })
    } else {
      this.dateMark = 'evening_scope'
      this.timeMark = '晚上'
      eveningAlarmCount().then(res => {
        this.list[2].quantity = res.data || '0'
      })
    }
    wfuSignHdOutYesCount({ timeScope: this.dateMark }).then(res => {
      this.data[0].quantity = res.data || '0'
    })
    wfuSignHdOutNoCount({ timeScope: this.dateMark }).then(res => {
      this.data[1].quantity = res.data || '0'
    })
    wfuSignWyInYesCount({ timeScope: this.dateMark }).then(res => {
      this.data[2].quantity = res.data || '0'
    })
    wfuSignWyOutYesCount({ timeScope: this.dateMark }).then(res => {
      this.list[0].quantity = res.data || '0'
    })
    wfuSignHdInYesCount({ timeScope: this.dateMark }).then(res => {
      this.list[1].quantity = res.data || '0'
    })
  },
  mounted () {

  },
  methods: {
    clickQuantity (e) {
      if (e.quantity === '0') {
        return
      }
      // 点击，查看详情
      if (e.titleName === '弘德已签到') {
        this.$refs.details.sign('wfu_sign_hd_out_yes', this.dateMark)
      } else if (e.titleName === '弘德未出发') {
        this.$refs.details.sign('wfu_sign_hd_out_no', this.dateMark)
      } else if (e.titleName === '已到达主校区') {
        this.$refs.details.sign('wfu_sign_wy_in_yes', this.dateMark)
      } else if (e.titleName === '已出主校区') {
        this.$refs.details.sign('wfu_sign_wy_out_yes', this.dateMark)
      } else if (e.titleName === '已到达弘德') {
        this.$refs.details.sign('wfu_sign_hd_in_yes', this.dateMark)
      } else if (e.titleName === '异常追踪') {
        this.$refs.alarm.alarmShow(this.dateMark)
      }
    },
    timeRange (beginTime, endTime) {
      let strb = beginTime.split(':')
      if (strb.length != 2) {
        return false
      }

      let stre = endTime.split(':')
      if (stre.length != 2) {
        return false
      }

      let b = new Date()
      let e = new Date()
      let n = new Date()

      b.setHours(strb[0])
      b.setMinutes(strb[1])
      e.setHours(stre[0])
      e.setMinutes(stre[1])

      if (n.getTime() - b.getTime() >= 0 && n.getTime() - e.getTime() < 0) {
        return true
      } else {
        return false
      }
    }
  }
}
</script>

<style scoped>
.container {

}

.box-cord {
  width: 100%;
  height: 100%;
  margin: 0 10px;
}

.title-text {
  height: 50px;
  line-height: 100px;
  color: #8c8c8c;
  cursor: pointer;
}

.err-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: space-between;
  width: 100%;
  height: 100%;
}

.err-item {
  height: 30px;
  line-height: 40px;
}
</style>
